<html>
<head>
<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
							
								jQuery(document).ready(function() {
								
									jQuery('#field-range-20').slider({
										
										range: true,
										min: 100000,
										max: 4000000,
										values: [100000, 4000000],
										step: 25000,										slide: function(event, ui) {
											
											var value1 = ui.values[0];
											var value2 = ui.values[1];
											console.log(20);
																						 var value1 = ui.values[0].formatMoney();
											 var value2 = ui.values[1].formatMoney();
																						
											//// CHANGES LABEL
											var theLabel = jQuery(this).parent().siblings('label.sf_if_20');
											theLabel.find('.min span').text(value1);
											theLabel.find('.max span').text(value2);
											
											//// CHANGES INPUT
											jQuery('#sale-price_min').val(ui.values[0]);
											jQuery('#sale-price_max').val(ui.values[1]);
											
											
										},
										stop: function(event, ui) {
											
											jQuery('#search-spots').submit();
											
										}
										
									});
									
								});
							
							</script>

							<div class="the-field-range sf_if_20" style=""><div class="field-range ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="field-range-20" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 20.51282051282051%; width: 79.48717948717949%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 20.51282051282051%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div></div>

</body>
</html>